import React, { useEffect, useState } from "react";
import styles from './index.less'
interface lp{
    value:[];
    onChange:(value:any) => void;
    
}

const PriceRangeForm: React.FC<lp> = (props) => {
    const{onChange}=props;
    const [result, setvalue] = useState<any>([]);
    const handleBlur = () => {
        setTimeout(() => {

            if (result[0] > result[1]) {
                const tmp = result[1]
               setvalue(tmp);
            }
        })
    };


    // useEffect(() => {
    //     if (value.length > 5) {
    //         setMaxPrice("");
    //         setMinPrice("");
    //     }

    // }, [value]);

   



    return (
        <form>
             
                <div className={styles.priceArea}>
                <input type="number" dir="rtl"
                    className={styles.input}
                    value={props.value[0]} placeholder="最低价"
                    onChange={(e) => {
                        const result = [...props.value]
                        result[0] = e.target.value
                        onChange(result)
                    }} 
                    onBlur={handleBlur}
                />
                <span className={styles.middle}>~ </span>
                <input type="number" dir="ltr"
                    className={styles.input}
                    value={props.value[1]}
                    placeholder="最高价"
                    onChange={(e) =>{
                        const result=[...props.value]
                         result[1]=e.target.value
                         onChange(result)
                     }} 
                    onBlur={handleBlur}
                />
            </div>
           
           


        </form>
    );
};

export default PriceRangeForm;
